/**
 * Created by ray on 17-6-8.
 */
'use strict';
import { TabNavigator, TabBarBottom,} from 'react-navigation';
import {HomeScreen, MineScreen,OrderScreen,WishScreen} from '../pages/index';
import {Image} from 'react-native';
import TabBarItem from './TabBarItem';
import React from 'react';

/**
 * 底部导航栏
 */

// 注册底部导航页面至TabNavigator
const TabBottomScreens = {
    Home: {
        screen: HomeScreen,
        navigationOptions:({navigation}) => ({
            tabBarLabel:'首页',
            tabBarIcon:({focused}) => (
                <TabBarItem
                    focused={focused}
                    normalImage={require('../images/home_outline.png')}
                    selectedImage={require('../images/home_inline.png')}

                />
            )
        }),
    },


    Order: {
        screen: OrderScreen,
        navigationOptions:({navigation}) => ({
            tabBarLabel:'看房',
            tabBarIcon:({focused}) => (
                <TabBarItem
                    focused={focused}
                    normalImage={require('../images/watch_outline.png')}
                    selectedImage={require('../images/watch_inline.png')}
                />
            )
        }),
    },


    Wish: {
        screen: WishScreen,
        navigationOptions:({navigation}) => ({
            tabBarLabel:'心愿',
            tabBarIcon:({focused}) => (
                <TabBarItem
                    focused={focused}
                    normalImage={require('../images/candle_outline.png')}
                    selectedImage={require('../images/candle_inline.png')}
                />
            )
        }),
    },// 还未定义名字及类型


    Mine: {
        screen: MineScreen,
        navigationOptions:({navigation}) => ({
            tabBarLabel:'我',
            tabBarIcon:({focused}) => (
                <TabBarItem
                    focused={focused}
                    normalImage={require('../images/face_outline.png')}
                    selectedImage={require('../images/face_inline.png')}
                />
            )
        }),
    },
};

// 配置底部导航参数
const TabBottomOptions = {
    tabBarComponent:TabBarBottom,
    tabBarPosition:'bottom',
    swipeEnabled:true,                     //是否允许在标签之间进行滑动
    animationEnabled:true,
    lazy:true,
    tabBarOptions:{
        marginTop:10,
        activeTintColor:'#FF80AB',           //label和icon的前景色 活跃状态下
        inactiveTintColor:'#607D8B',         //label和icon的前景色 不活跃状态下
        style:{backgroundColor:'white'},
        labelStyle:{
            fontSize:12,
            marginTop:3,
            marginBottom:1
        }
    }
};

const TabBar = TabNavigator (
    TabBottomScreens,
    TabBottomOptions
);

export default TabBar;